<template>
  <div>
  <div style=" background-color: rgb(234, 234, 234);height: 30px">
    <div class="header">
      <div class="header-left">
        <p>尚品汇欢迎你!</p>
        <span v-if="!userName">请</span>
        <span v-else>用户:</span>
        &nbsp;
        <router-link to="/login">{{userName||'登录'}}</router-link>
        <span>|</span>
        <router-link to="/register" v-if="!userName">免费注册</router-link>
        <a href="javascript:void(0)" v-else style="height: 16px;width: auto" @click="userLogout">退出登录</a>
      </div>
      <div class="header-right">
        <ul>
          <li><router-link to="/center/myOrder">我的订单</router-link></li>
          <li><a href="javascript:void(0)" @click="$router.push('/shopCart')">我的购物车</a></li>
          <li><a href="javascript:void(0)">我的尚品汇</a></li>
          <li><a href="javascript:void(0)">尚品汇会员</a></li>
          <li><a href="javascript:void(0)">企业采购</a></li>
          <li><a href="javascript:void(0)">关注尚品汇</a></li>
          <li><a href="javascript:void(0)">合作招商</a></li>
          <li><a href="javascript:void(0)">商家后台</a></li>
        </ul>
      </div>
    </div>
  </div>
    <div class="nav">
      <div class="nav-log">
        <h1>
          <img src="../../assets/img/log.png" />
        </h1>
      </div>
      <div class="nav-search">
        <input type="text" v-model="categoryName"/>
        <button @click="goSearch">搜索</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
   return{
    categoryName:''
   }
  },
  computed:{
    userName(){
      if(this.$store.state.user.userInfo.name) {
        return this.$store.state.user.userInfo.name
      }
    }
  },
  mounted() {
  this.$store.dispatch('getBannerList')
    this.$store.dispatch('getUserInfo')
    this.$bus.$on('remove',(data)=>{
      this.categoryName=data
    })
    },
  methods: {
    async userLogout(){
      try {
        await this.$store.dispatch('userLogout')
        await this.$router.push('/home')
      }catch (e) {

      }
    },
    goSearch() {
      // this.$router.push(`/search/${this.keyword}?key=up`)
      if (this.$route.query) {//当你靠点击进入时(这是有query),然后再搜索时(有params但没有query,这时需要携带上)
        let location = {
          // params:{
          //   keyword:this.keyword || undefined,
          // },
          name: 'search',
          params: {keyword: this.categoryName || undefined}//使用?代表可以不传,即不输入任何字符串,否则会调到根路径
        }
        location.query=this.$route.query
        this.$router.push(location)
      }
      }
    }
}
</script>

<style scoped lang="less">
.header {
  height: 30px;
  width: 1200px;
  margin: 0 auto;
  .header-left {
    float: left;
    height: 30px;
    font-size: 12px;
    p {
      line-height: 30px;
      float: left;
      margin-right: 10px;
    }
    a {
      line-height: 30px;
      color: rgb(102, 102, 102);
    }
  }
  .header-left span:nth-child(4) {
    font-size: 15px;
    margin-left: 5px;
    color: rgb(179, 174, 174);
  }
  .header-left a:nth-child(5) {
    margin-left: 5px;
  }
  .header-right {
    float: right;
    font-size: 12px;
    height: 30px;
    width: 600px;
    display:flex;
    justify-content: center;
    align-items: center;
    ul {
      li:nth-child(-n + 7) {
        float: left;
        padding: 0 10px;
        border-right: 1px solid rgb(179, 174, 174);
        a {
          color: rgb(102, 102, 102);
        }
      }
      li:nth-child(8) {
        padding-left: 10px;
        float: left;
        color: rgb(102, 102, 102);
        a {
          color: rgb(102, 102, 102);
        }
      }
    }
  }
}
.nav {
  width: 1200px;
  height: 110px;
  margin: 0 auto;
  .nav-log {
    height: 110px;
    width: 265px;
    float: left;
    h1 {
      height: 110px;
      width: 265px;
      img {
        margin: 27px 45px;
        line-height: 110px;
      }
    }
  }
  .nav-search {
    margin-top: 39px;
    width: 570px;
    height: 38px;
    float: right;
    input {
      outline: none;
      display: block;
      float: left;
      width: 490px;
      height: 28px;
      padding: 0 4px;
      border: 2px solid #ea4a36;
    }
    button {
      float: left;
      height: 32px;
      width: 68px;
      background-color:rgb( 234,74,54);
      border: none;
      color: #fff;
    }
  }
}
</style>
